$(function (){
    var name           =""   ,
        mouseOverShow  =""   ,
        top                  ,
        left                 ;
    $('#QuickLinks').on("mouseenter",'.productShow',function (){
        if(mouseOverShow.length===0){
            name            =$(this).data('name');
            console.log(name);
            if(name!==null&&name!==""&&name.length!==0) {
                if(mouseOverShow!==null||mouseOverShow!==""||mouseOverShow!==0) {
                    $('#mouseOverShow').remove();
                    $('#Catalog').show();
                    $('#MainImageContent').show();
                    $('#SidebarContent').show();
                    $('#QuickLinks').show();
                    mouseOverShow = "";
                }
                top=$(this).position().top;
                left=$(this).position().left+20;
                $.ajax({
                    type: 'GET',
                    url: 'http://localhost:8080/jpetstore_666/mouseOver?CategoryId=' + name,
                    success: function(data) {
                        var mouseOverShow = '<div id="mouseOverShow">';
                        mouseOverShow += '<hr>';
                        mouseOverShow += '<br>';
                        for (var i = 0; i < data.length; i++) {
                            mouseOverShow += data[i].description.substring(data[i].description.indexOf('<'), data[i].description.indexOf('>') + 1).toLowerCase();
                            mouseOverShow += '<br>';
                            mouseOverShow += data[i].name;
                            mouseOverShow += '<br>';
                            mouseOverShow += data[i].description.substring(data[i].description.indexOf('>') + 1, data[i].description.length);
                            mouseOverShow += '<br>';
                            mouseOverShow += '<hr>';
                        }
                        mouseOverShow += '</div>';
                        var targetNode = document.getElementById('QuickLinks');

                        var observer = new MutationObserver(function(mutationsList) {
                            for (var mutation of mutationsList) {
                                if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                                    var newElement = $(mutation.addedNodes[0]);
                                    newElement.css({
                                        'top': top,
                                        'left': left,
                                        'transform': 'translate(50%,-10%)',
                                    });
                                    observer.disconnect();
                                    break;
                                }
                            }
                        });

                        observer.observe(targetNode, { childList: true });

                        $(mouseOverShow).appendTo(targetNode);
                        $('#QuickLinks').show();
                    },
                    error   :   function (errorMsg){
                        console.log(errorMsg);
                    }
                })
            }
        }
    })
    $('#QuickLinks').on('mouseleave','.productShow',function (){
        if(mouseOverShow!==null||mouseOverShow!==""||mouseOverShow!==0) {
            $('#mouseOverShow').remove();
            $('#QuickLinks').show();
            mouseOverShow = "";
        }
    })
    $('#SidebarContent').on("mouseenter",'.productShow_1',function (){
        if(mouseOverShow.length===0){
            name            =$(this).data('name');
            console.log(name);
            if(name!==null&&name!==""&&name.length!==0) {
                if(mouseOverShow!==null||mouseOverShow!==""||mouseOverShow!==0) {
                    $('#mouseOverShow').remove();
                    $('#Catalog').show();
                    $('#MainImageContent').show();
                    $('#SidebarContent').show();
                    $('#QuickLinks').show();
                    mouseOverShow = "";
                }
                top=$('#top_1').position().top;
                left=$(this).position().left+60;
                $.ajax({
                    type: 'GET',
                    url: 'http://localhost:8080/jpetstore_666/mouseOver?CategoryId=' + name,
                    success: function(data) {
                        var mouseOverShow = '<div id="mouseOverShow">';
                        mouseOverShow += '<hr>';
                        mouseOverShow += '<br>';
                        for (var i = 0; i < data.length ; i++) {
                            mouseOverShow += data[i].description.substring(data[i].description.indexOf('<'), data[i].description.indexOf('>') + 1).toLowerCase();
                            mouseOverShow += '<br>';
                            mouseOverShow += data[i].name;
                            mouseOverShow += '<br>';
                            mouseOverShow += data[i].description.substring(data[i].description.indexOf('>') + 1, data[i].description.length);
                            mouseOverShow += '<br>';
                            mouseOverShow += '<hr>';
                        }
                        mouseOverShow += '</div>';
                        var targetNode = document.getElementById('SidebarContent');

                        var observer = new MutationObserver(function(mutationsList) {
                            for (var mutation of mutationsList) {
                                if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                                    var newElement = $(mutation.addedNodes[0]);
                                    newElement.css({
                                        'top': top,
                                        'left': left,
                                        'transform': 'translate(25%,-18%)',
                                        'text-align': 'center'
                                    });
                                    observer.disconnect();
                                    break;
                                }
                            }
                        });

                        observer.observe(targetNode, { childList: true });

                        $(mouseOverShow).appendTo(targetNode);
                        $('#SidebarContent').show();
                    },
                    error   :   function (errorMsg){
                        console.log(errorMsg);
                    }
                })
            }
        }
    })
    $('#SidebarContent').on('mouseleave','.productShow_1',function (){
        if(mouseOverShow!==null||mouseOverShow!==""||mouseOverShow!==0) {
            $('#mouseOverShow').remove();
            $('#SidebarContent').show();
            mouseOverShow = "";
        }
    })
    $('#MainImageContent').on("mouseenter",'.productShow_2',function (){
        if(mouseOverShow.length===0){
            name            =$(this).data('name');
            console.log(name);
            if(name!==null&&name!==""&&name.length!==0) {
                if(mouseOverShow!==null||mouseOverShow!==""||mouseOverShow!==0) {
                    $('#mouseOverShow').remove();
                    $('#Catalog').show();
                    $('#MainImageContent').show();
                    $('#SidebarContent').show();
                    $('#QuickLinks').show();
                    mouseOverShow = "";
                }
                top=$('#top_2').position().top;
                left=$(this).position().left+300;
                $.ajax({
                    type: 'GET',
                    url: 'http://localhost:8080/jpetstore_666/mouseOver?CategoryId=' + name,
                    success: function(data) {
                        var mouseOverShow = '<div id="mouseOverShow">';
                        mouseOverShow += '<hr>';
                        mouseOverShow += '<br>';
                        for (var i = 0; i < data.length; i++) {
                            mouseOverShow += data[i].description.substring(data[i].description.indexOf('<'), data[i].description.indexOf('>') + 1).toLowerCase();
                            mouseOverShow += '<br>';
                            mouseOverShow += data[i].name;
                            mouseOverShow += '<br>';
                            mouseOverShow += data[i].description.substring(data[i].description.indexOf('>') + 1, data[i].description.length);
                            mouseOverShow += '<br>';
                            mouseOverShow += '<hr>';
                        }
                        mouseOverShow += '</div>';
                        var targetNode = document.getElementById('MainImageContent');

                        var observer = new MutationObserver(function(mutationsList) {
                            for (var mutation of mutationsList) {
                                if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                                    var newElement = $(mutation.addedNodes[0]);
                                    newElement.css({
                                        'top': top,
                                        'left': left,
                                        'transform': 'translate(100%,-18%)',
                                        'text-align': 'center'
                                    });
                                    observer.disconnect();
                                    break;
                                }
                            }
                        });

                        observer.observe(targetNode, { childList: true });

                        $(mouseOverShow).appendTo(targetNode);
                        $('#SidebarContent').show();
                    },
                    error   :   function (errorMsg){
                        console.log(errorMsg);
                    }
                })
            }
        }
    })
    $('#MainImageContent').on('mouseleave','.productShow_2',function (){
        if(mouseOverShow!==null||mouseOverShow!==""||mouseOverShow!==0) {
            $('#mouseOverShow').remove();
            $('#MainImageContent').show();
            mouseOverShow = "";
        }
    })
    $('#Catalog').on("mouseenter",'.productShow_3',function (){
        if(mouseOverShow.length===0){
            name            =$(this).data('name');
            console.log(name);
            if(name!==null&&name!==""&&name.length!==0) {
                if(mouseOverShow!==null||mouseOverShow!==""||mouseOverShow!==0) {
                    $('#mouseOverShow').remove();
                    $('#Catalog').show();
                    $('#MainImageContent').show();
                    $('#SidebarContent').show();
                    $('#QuickLinks').show();
                    mouseOverShow = "";
                }
                top=$(this).position().top-120;
                left=$(this).position().left+600;
                $.ajax({
                    type: 'GET',
                    url: 'http://localhost:8080/jpetstore_666/mouseOver_2?productId=' + name,
                    success: function(data) {
                        console.log(data);
                        var mouseOverShow = '<div id="mouseOverShow">';
                        mouseOverShow += '<hr>';
                        mouseOverShow += '<br>';
                        mouseOverShow += data.description.substring(data.description.indexOf('<'), data.description.indexOf('>') + 1).toLowerCase();
                        mouseOverShow += '<br>';
                        mouseOverShow += data.name;
                        mouseOverShow += '<br>';
                        mouseOverShow += data.description.substring(data.description.indexOf('>') + 1, data.description.length);
                        mouseOverShow += '<br>';
                        mouseOverShow += '<hr>';
                        mouseOverShow += '</div>';
                        var targetNode = document.getElementById('Catalog');

                        var observer = new MutationObserver(function(mutationsList) {
                            for (var mutation of mutationsList) {
                                if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                                    var newElement = $(mutation.addedNodes[0]);
                                    newElement.css({
                                        'top': top,
                                        'left': left,
                                        'transform': 'translate(100%,100%)',
                                        'text-align': 'center'
                                    });
                                    observer.disconnect();
                                    break;
                                }
                            }
                        });

                        observer.observe(targetNode, { childList: true });

                        $(mouseOverShow).appendTo(targetNode);
                        $('#Catalog').show();
                    },
                    error   :   function (errorMsg){
                        console.log(errorMsg);
                    }
                })
            }
        }
    })
    $('#Catalog').on('mouseleave','.productShow_3',function (){
        if(mouseOverShow!==null||mouseOverShow!==""||mouseOverShow!==0) {
            $('#mouseOverShow').remove();
            $('#Catalog').show();
            mouseOverShow = "";
        }
    })
})